<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            width: 300px;
        }
        .gt img{
            width: 300px;
            height: 300px;
        }
        .lt
        {
            display: flex;
        }
        .lt img{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            padding: 5px;
 
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="gt">
            <img src="./register/dd1.jpg" alt="">
        </div>
        <div class="lt">
            <img src="./register/dd1.jpg" alt="">
            <img src="./register/dd2.jpg" alt="">
            <img src="./register/dd3.jpg" alt="">
            <img src="./register/dd4.jpg" alt="">
            <img src="./register/dd5.jpg" alt="">
            
        </div>
    </div>
    <script>
        //大图
        let gtImg=document.querySelector(".gt>img");
        //小缩略图
        let images=document.querySelectorAll(".lt>img");
        images.forEach(image=>{
            image.onclick=function(){
               // 点击当前小图img，大图img的src与小图一致
            image.onclick=function(){
                gtImg.src=this.src;
            }
            // 悬浮加边框
           image.onmouseover=function(){
            this.style.border='1px solid green';
           }
 
           image.onmouseout=function(){
            this.style.border='1px solid red';
           }
            }
        })
    </script>
</body>
</html>